<template>
  <div class="home">
    <header_panel></header_panel>
    <banner_panel height="600px" width="100%" :list="list"></banner_panel>
    <div class="main">
      <div class="content1">
        <div class="title">专业的视觉动画设计服务</div>
        <div class="desc">我们是一家在中国为用户提供视觉动画设计解决方案的公司</div>
        <ul>
          <li>
            <img src="https://api.ixiaowai.cn/gqapi/gqapi.php">
            <div class="content1_title">模型建立服务</div>
            <div class="content1_content">根据您提供的设计图纸，建立模型，并且可以根据您的需求进行多次更改，以达到最好的呈现效果。将最为规范化的模型建立和立体化的视觉符号，传达给您的客户。</div>
          </li>
          <li>
            <img src="https://api.ixiaowai.cn/gqapi/gqapi.php">
            <div class="content1_title">场景漫游服务</div>
            <div class="content1_content">一改以往的效果图展现方式，将涉及的所有细节进行展示，不仅可以给人以漫游在真实空间的体验，还可以进行细节效果的更改以达到100%的设计完成度。</div>
          </li>
          <li>
            <img src="https://api.ixiaowai.cn/gqapi/gqapi.php">
            <div class="content1_title">视频加工服务</div>
            <div class="content1_content">我们同时提供将完成的设计将进行影视加工处理，并且加以剪辑，渲染，配乐，将您的设计以影视级别的视频效果呈献给您的客户。</div>
          </li>
        </ul>
      </div>
      <div class="content2">
        <div class="title">最新作品</div>
        <div class="desc">这些是我们最新的客户作品，您也可以拥有这样的作品</div>
        <div class="content2_item">
          <img src="../../../static/img/img1.jpg">
        </div>
        <div class="content2_item">
          <img src="../../../static/img/img2.jpg">
        </div>
        <div class="content2_item">
          <img src="../../../static/img/img3.jpg">
        </div>
      </div>
      <div class="content3">
        <div class="title">经典客户</div>
        <div class="desc">您可以像他们一样信赖我们的服务</div>
      </div>
      <div class="content4">
        <div>Copyright 2020 BinBini. All Rights Reserved.</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
  name: 'home',
  comments: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      screenWidth: document.body.clientWidth,
      list: [
        {
          imgPath: 'http://binbini.gitee.io/cdn/Sherry/assets/images/pic1.jpg',
          url: 'http://binbini.gitee.io/cdn/Sherry/assets/images/pic1.jpg'
        },
        {
          imgPath: 'http://binbini.gitee.io/cdn/Sherry/assets/images/pic2.jpg',
          url: 'http://binbini.gitee.io/cdn/Sherry/assets/images/pic2.jpg'
        },
        {
          imgPath: 'http://binbini.gitee.io/cdn/Sherry/assets/images/pic3.jpg',
          url: 'http://binbini.gitee.io/cdn/Sherry/assets/images/pic3.jpg'
        }
      ]
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  }

}
</script>
<style scoped>
  @import "../../assets/style/Home.css";
</style>
